<template>
    <div class="tjBox">
        <p class="top">相关推荐</p>
        <div class="smallBox">
            <div class="small" v-for="(item, index) in arrCon.slice(0, 9)" :key="index">
                <div class="smallTop">
                    <img :src="item.body.items[0].url" alt="">
                </div>
                <div class="center">
                    <p class="smallP">{{ item.body.items[0].product_name }}</p>
                </div>
                <div class="bootom">
                    <p>￥{{item.body.items[0].product_price}}</p>
                </div>
            </div>
        </div>
    </div>

   
</template>
<script setup lang='ts'>
import { ref } from 'vue'
import axios from 'axios';
let arrCon = ref([])
let arrImg = ref([])
let img = "https://apis.netstart.cn/xmsc/home/channel1_tab?page_id=14709&type=classification&block_id=3570989&id=69&page_size=40&page_index=8";
let img1 = "https://apis.netstart.cn/xmsc/home/channel1_tab?page_id=14709&type=classification&block_id=3570989&id=69&page_size=40&page_index=9";
axios.get(img).then((res) => {
    arrCon.value = res.data.data.sections
})
axios.get(img1).then((res) => {
    arrImg.value = res.data.data.sections
})

</script>
<style scoped>
.tjBox {
    font-size: 0.12rem;
    width: 3.5rem;
    height: 5.2rem;
    margin: 0 auto;
    margin-top: 0.12rem;
    border-radius: 0.1rem;
    background-color: #fff;
    padding: 0.2rem 0.1rem;
}

.top {
    font-size: 0.18rem;
    font-weight: bold;
}

.smallTop img {
    width: 0.89rem;
    height: 0.86rem
}

.smallBox {
   
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.center {
    width: 0.8rem;
    margin-bottom: 0.1rem;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.bootom{
    color: #ff0000;
    font-weight: bold;
    font-size: 0.16rem;
}
</style>